<script setup>
import { usePhotoStore } from '@/stores/photoStore'
import FaceCluster from '@/components/FaceCluster.vue'

const store = usePhotoStore()
const { groupedFaces } = storeToRefs(store)

// 智能分组逻辑
const smartGroups = computed(() => {
  return groupedFaces.value.map(group => ({
    ...group,
    timeline: group.photos
      .map(p => new Date(p.date).getTime())
      .sort((a, b) => a - b)
  }))
})
</script>

<template>
  <div class="face-view-container">
    <div class="cluster-grid">
      <FaceCluster
        v-for="(group, index) in smartGroups"
        :key="index"
        :photos="group.photos"
        :timeline="group.timeline"
        @click="store.selectFaceGroup(index)"
      />
    </div>
    <FaceDetailsSidebar />
  </div>
</template>